<template>
  <view class="page">
    <div class="process">
      <wd-text :text="`${pagination.current + 1}/${examState.questions.length}`"></wd-text>
      <!-- <wd-circle v-model="currentProcess" :size="46" :clockwise="false" :text="`${pagination.current + 1}/${examState.questions.length}`"></wd-circle> -->
    </div>
    <view v-if="currentQuestion" class="page-content">
      <WrapperQuestion
        v-model="userAnswer"
        :order="pagination.current + 1"
        :type="currentQuestion.primaryQuesType"
        :show-tags="true"
        :tags="[currentQuestion.primaryQuesType, currentQuestion.source]"
        :title="currentQuestion.questionContent"
        :options="currentQuestion.options"
        :answer="currentQuestion.answer"
        :show-true-answer="false"
        :show-analysis="showAnalysis"
        :analysis="currentQuestion.analysis"
        :meta-data="[
          { label: '难度', value: currentQuestion.quesLevel },
          { label: '知识点', value: currentQuestion.knowledgePointsSimple },
          { label: '来源', value: currentQuestion.source },
          { label: '证书类型', value: currentQuestion.cardType },
        ]"
      />
    </view>
    <view class="page-footer">
      <wd-button :disabled="pagination.current === 0" @click="handlePrev">上一题</wd-button>
      <wd-button :disabled="pagination.current === examState.questions.length -1" type="success" @click="handleNext">下一题</wd-button>
    </view>
    
  </view>
</template>

<script setup>
import usePage from "@/hooks/usePage.js"
import useLoading from "@/hooks/useLoading.js"
import { getExamWithHistory, submitOne } from "@/api/train/course"
import WrapperQuestion from "@/components/material/ques-type/index.vue"

const { loading, setLoading } = useLoading()

const { systemBarHeight, menuBotton } = usePage()

let examId = ref(undefined)

const examState = ref({
  questions: []
})

const pagination = reactive({
  current: 0,
})

const userAnswer = ref('')
const showAnalysis = ref(false)

const currentQuestion = computed(() => {
  if(!examState.value.questions.length) return null
  return examState.value.questions[pagination.current]
})

const nextQuestion = computed(() => {
  if(!examState.value.questions.length || pagination.current === examState.questions) return null
  return examState.value.questions[pagination.current + 1]
})

onLoad(options => {
  examId.value = +options.examId || 2
  getQuesList()
})

const getQuesList = async () => {
  setLoading(true)
  try {
    const { data } = await getExamWithHistory(examId.value)
    console.log("试卷列表", data)
    examState.value = data
    // 已作答的索引
    pagination.current = data.finishedIndex
  } finally {
    setLoading(false)
  }
}

const handlePrev = () => {
  pagination.current--
  const answerHistory = currentQuestion.value.userAnswerData
  if(answerHistory){
    userAnswer.value = answerHistory.value
    showAnalysis.value = true
  } else {
    showAnalysis.value = false
    userAnswer.value = ''
  }
}


const handleNext = async () => {
  
  if(currentQuestion.value.userAnswerData){
    const answerHistory = nextQuestion.value.userAnswerData
    if(answerHistory) {
      userAnswer.value = answerHistory.value
      showAnalysis.value = true
    }else {
      showAnalysis.value = false
      userAnswer.value = ''
    }

    pagination.current++
    return
  }
  
  if(!userAnswer.value){
    uni.showToast({
      icon: 'error',
      title: '请作答',
    });
    return
  }
  const params = {
    examId: examId.value,
    questionId: currentQuestion.value.questionId,
    questionOrder: pagination.current,
    userAnswerData: {
      value: userAnswer.value
    }
  }
  await submitOne(params)

  currentQuestion.value.userAnswerData = params.userAnswerData
  
  pagination.current++
  showAnalysis.value = false
  userAnswer.value = ''
}

watch(userAnswer, (val) => {
  if(val){
    showAnalysis.value = true
  }
})
</script>

<style lang="scss" scoped>
.page {
  padding: 16rpx;

  .process {
    text-align: right;
  }

  &-content {
    margin-bottom: 86rpx;
  }

  &-footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 0;
    background-color: #fff;
  }
}
</style>
